<template>
	<div>
		<el-calendar v-model="value" id="calendar">
			<template slot="dateCell" slot-scope="{ data }">
				<div>
					<div class="calendar-day" style="margin-bottom: -10px; float: left">
						{{ data.day.split('-').slice(2).join('-') }}
					</div>
					<el-button
						style="margin-bottom: -10px; float: right"
						class="yuyue"
						:plain="true"
						@click.stop="dialogTableVisible = true"
						type="text"
						size="small"
					>
						查看更多
					</el-button>
					<br />
					<div v-for="(item, index) in list" :key="index">
						<div v-if="item.date.indexOf(data.day) != -1">
							<el-tooltip class="item" effect="dark" :content="item.name" placement="right">
								<div class="is-selected">
									<div style="height: 20px; margin-bottom: -5px">
										<!-- <template slot-scope="scope1"> -->
										<el-scrollbar style="height: 100%">
											<el-button type="text" style="" @click.stop="appointment(item)">
												预约
											</el-button>
											{{ item.type }}:{{ item.name }}
										</el-scrollbar>
										<!-- </template> -->
									</div>
								</div>
							</el-tooltip>
						</div>
						<div v-else></div>
					</div>
				</div>
			</template>
		</el-calendar>
		<el-dialog
			title="可预约场馆"
			:visible.sync="dialogTableVisible"
			width="30%"
			:before-close="more"
		>
			<el-table :data="list" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="type" label="场馆分类" align="center"></el-table-column>
				<el-table-column prop="name" label="场馆名称" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button :plain="true" @click="handleClick(scope.row)" type="text" size="small">
							查看预约详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
import { appoinmentRoomsLists, appoinmentCustomerRoomsList } from '@/APIs/index/index'
export default {
	name: 'Appointment',
	data() {
		return {
			dialogTableVisible: false,
			value: new Date(),
			form: [],
			list: [],
			res: [],
			currentDate: '',
			formatSchedule: '',
			dialogVisible: false,
			formLabelWidth: '120px'
		}
	},
	created() {
		this.$nextTick(() => {
			// 点击前一个月
			let prevBtn = document.querySelector(
				'.el-calendar__button-group .el-button-group>button:nth-child(1)'
			)
			// eslint-disable-next-line no-unused-vars
			prevBtn.addEventListener('click', e => {
				let d = new Date(this.timeValue)
				// eslint-disable-next-line no-unused-vars
				let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-08
			})
			//点击下一个月
			let nextBtn = document.querySelector(
				'.el-calendar__button-group .el-button-group>button:nth-child(3)'
			)
			// eslint-disable-next-line no-unused-vars
			nextBtn.addEventListener('click', e => {
				let d = new Date(this.timeValue)
				// eslint-disable-next-line no-unused-vars
				let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-10
			})
			//点击今天
			let todayBtn = document.querySelector(
				'.el-calendar__button-group .el-button-group>button:nth-child(2)'
			)
			// eslint-disable-next-line no-unused-vars
			todayBtn.addEventListener('click', e => {
				let d = new Date(this.timeValue)
				// eslint-disable-next-line no-unused-vars
				let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-09
			})
		})
		this.Appointment()
	},
	methods: {
		morethan(val) {
			this.dialogTableVisibl = true
			console.log(val)
		},
		input() {
			console.log('')
			this.dialogFormVisible = true
		},
		async Appointment() {
			console.log('调用接口')
			const res = await appoinmentRoomsLists()
			console.log(res.data)
			res.data.forEach(item => {
				this.form.push({
					type: item.roomType,
					name: item.roomName,
					appApprover: item.appApprover,
					value: item.roomId,
					buildingName: item.buildingName,
					createTime: item.createTime,
					roomAppTime: item.roomAppTime
				})
				// this.list = [...this.list, ...item.roomAppTime]
				item.roomAppTime.forEach(_item => {
					this.list.push({
						date: _item.roomAppTimeDay,
						time: _item.roomAppTimeScope,
						roomAppId: _item.roomAppId,
						roomAppTimeId: _item.roomAppTimeId,
						type: item.roomType,
						name: item.roomName,
						appApprover: item.appApprover
					})
				})
			})
			console.log(this.list)
			console.log(this.form)
		},
		//处理时间
		handleTime(s) {
			return s < 10 ? '0' + s : s
		},
		//点击天数
		changeTime(date, data) {
			this.dialogFormVisible = true
			console.log(date, data)
		},
		more(done) {
			console.log('查看更多')
			this.$confirm('确认关闭？')
				// eslint-disable-next-line no-unused-vars
				.then(_ => {
					done()
				})
				// eslint-disable-next-line no-unused-vars
				.catch(_ => {})
		},
		appointment(val) {
			console.log('点击预约', val)
			// console.log(row)
			this.$router.push({
				path: '/ViewDetail',
				query: {
					customerRoomAppName: val.name,
					roomAppTimeScope: val.time,
					appApprover: val.appApprover,
					roomType: val.type,
					date: val.date,
					roomAppId: val.roomAppId,
					roomAppTimeId: val.roomAppTimeId,
				}
			})
		},
		async handleClick(row) {
			console.log(row)
			const roomAppId = row.roomAppId
			const roomAppTimeId = row.roomAppTimeId
			const data = await appoinmentCustomerRoomsList({ roomAppId, roomAppTimeId })
			console.log(data)
			this.$router.push({
				path: '/ViewRoomDetail',
				query: { roomAppId: row.roomAppId, roomAppTimeId: row.roomAppTimeId }
			})
		}
	}
}
</script>

<style>
.yuyue {
	color: blue;
}
.div-Calendar {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.calendar-day {
	/* text-align: center; */
	color: #202535;
	line-height: 30px;
}

.is-selected {
	font-size: 10px;
	margin-top: 5px;
}

#calendar .el-button-group > .el-button:not(:first-child):not(:last-child):after {
	content: '当月';
}
</style>